<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .box {
            width: 500px;
            height: 400px;
            border: 2px solid #000;
        }

        .class1 {
            width: 200px;
            height: 100px;
            background-color: pink;
        }

        .class11 {
            width: 200px;
            height: 100px;
            background-color: lawngreen;
        }

        .class111 {
            width: 200px;
            height: 100px;
            background-color: blue;
        }

        .class1111 {
            width: 200px;
            height: 100px;
            background-color: cyan;
        }

        .class2 {
            width: 200px;
            height: 100px;
            background-color: #ff6700;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box">
            <div @click="fn1" :class="[isYes1? 'class1' : 'class2']">首页</div>
            <div @click="fn2" :class="[isYes2? 'class11' : 'class2']">体育</div>
            <div @click="fn3" :class="[isYes3? 'class111' : 'class2']">军事</div>
            <div @click="fn4" :class="[isYes4? 'class1111' : 'class2']">生活</div>

        </div>
        <span>{{spn}}</span>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                spn: '首页',
                isYes1: true,
                isYes2: true,
                isYes3: true,
                isYes4: true,
            },
            methods: {
                fn1(e) {
                    this.spn = e.target.innerText
                    this.isYes1 = false
                    this.isYes2 = true
                    this.isYes3 = true
                    this.isYes4 = true
                },
                fn2(e) {
                    this.spn = e.target.innerText
                    this.isYes2 = false
                    this.isYes1 = true
                    this.isYes3 = true
                    this.isYes4 = true
                },
                fn3(e) {
                    this.spn = e.target.innerText
                    this.isYes3 = false
                    this.isYes2 = true
                    this.isYes1 = true
                    this.isYes4 = true
                },
                fn4(e) {
                    this.spn = e.target.innerText
                    this.isYes4 = false
                    this.isYes3 = true
                    this.isYes2 = true
                    this.isYes1 = true
                },
            }
        }) 
    </script>
</body>

</html>